<template>
  <sys-layout>
    <template v-slot:top>
      <quarter-bar @init="onInit" @change="onChange"/>
    </template>

    <large-card title="楼盘情况">
      <template v-slot:head-tool>
        <div class="card-common-tool" @click="showDialog">
          <div class="card-common-tool__ico"></div>
          <span >明细</span>
        </div>
      </template>

      <div class="card-linewrap">
        <div class="card-line1">
          <div class="card-img-wrap">
            <img src="@/assets/screen/ico-build2.svg" />
          </div>
          <div class="card-line1-right">
            <div class="card-line1-right__top">在售楼盘</div>
            <div class="card-line1-right__bottom">
              <div class="card-num"><sys-num :value="23" /></div>
              <div class="card-unit">个</div>
            </div>
          </div>
          <div class="card-line1-chart">

          </div>
        </div>

        <div class="card-line2">
          <div class="card-line2-half">
            <div class="card-line2-left">
              <img src="@/assets/screen/ico-money-mini.svg" />
            </div>
            <div class="card-line2-right">
              <div class="card-line2-right__top">总投资</div>
              <div class="card-line2-right__bottom">
                <div class="card-num"><sys-num :value="313.93" /></div>
                <div class="card-unit">亿元</div>
              </div>
            </div>
          </div>
          <div class="card-line2-half">
            <div class="card-line2-left">
              <img src="@/assets/screen/ico-build.svg" />
            </div>
            <div class="card-line2-right">
              <div class="card-line2-right__top">建筑规模</div>
              <div class="card-line2-right__bottom">
                <div class="card-num"><sys-num :value="447.31" /></div>
                <div class="card-unit">万米²</div>
              </div>
            </div>
          </div>
        </div>


        <simple-title title="房产销售">
          <template v-slot:tool>
            <div class="card-common-tool is-trend" @click="showDialog">
              <div class="card-common-tool__ico"></div>
              <span >趋势</span>
            </div>
          </template>
        </simple-title>

        <fczt-lines />

        <simple-title title="实施进展" />

        <fczt-bars :list="list1"/>

      </div>



    </large-card>

    <screen-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>
  </sys-layout>
</template>

<script>
import bus from '@/components/common/utils/bus'

import quarterBar from '@/comp/screen/screen-left/quarter-bar'

import largeCard from '../large-card'
import simpleTitle from '../simple-title'
import fcztLines from './fczt-lines'
import fcztBars from './fczt-bars'
import { debounce } from 'throttle-debounce'
import dialogMixin from '@/components/common/dialog/dialog-mixin'
import screenDialog from '@/comp/screen/dialog/screen-dialog'
import fcztAnalyseDialog from './fczt-analyse-dialog'

export default {
  name: 'index',
  cnName: '房产专题',
  mixins: [dialogMixin],
  components: {
    screenDialog,
    quarterBar,
    largeCard,
    simpleTitle,
    fcztLines,
    fcztBars
  },
  data() {
    return {
      list1: [
        {label: '在建', value: 5},
        {label: '部分在建', value: 19},
        {label: '部分交楼', value: 20},
        {label: '停缓建', value: 5},
        {label: '已完工', value: 13}
      ]
    }
  },
  methods: {
    onInit() {

    },
    onChange() {},
    initEvent() {
      const el = this.$el.querySelectorAll('.scroller')
      if(!el || !el.length) return
      const scroller = el[0]
      this.scroller = scroller
      this.proxyResize = debounce(1, this.resize)

      scroller.addEventListener('scroll', this.proxyResize)

    },
    resize() {
      bus.$emit('on-fczt-scroll')
    },
    showDialog() {
      this.setDialog({
        width: '70%',
        height: '70%',
        title: '房产销售分析',
        comp: fcztAnalyseDialog,
        props: {}
      })
    }
  },
  beforeDestroy() {
    if(this.scroller) {
      this.scroller.removeEventListener('scroll', this.proxyResize)
    }
  },
  mounted() {
    this.initEvent()
  }
}
</script>

<style lang="scss" scoped>
.card-common-tool {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #58CDD1;

  & > span {
    margin-left: 5px;
  }

  &__ico {
    width: 17px;
    height: 16px;
    background-image: url("~@/assets/screen/ico-list.svg");
    background-size: 100% 100%;
  }

  &:hover {
    color: #FF0;
    .card-common-tool__ico {
      background-image: url("~@/assets/screen/ico-list-hover.svg");
      background-size: 100% 100%;
    }
  }

  &.is-trend {
    .card-common-tool__ico {
      background-image: url("~@/assets/screen/ico-trend.svg");
    }

    &:hover {
      .card-common-tool__ico {
        background-image: url("~@/assets/screen/ico-trend-hover.svg");
      }
    }
  }
}

.card-linewrap {
  padding: 0 20px;

  .card-num {
    font-weight: 500;
    color: #88CDFF;
    font-size: 30px;
  }
  .card-unit {
    color: #88CDFF;
    font-size: 14px;
  }
  .card-line1 {
    display: flex;
    margin-top: 40px;

    .card-img-wrap {
      width: 70px;
      height: 77px;
      background-image: url("~@/assets/screen/ico-light.png");
      background-size: 100% 100%;
      position: relative;
      margin-right: 8px;

      & > img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -6px;
      }
    }

    &-right {
      &__top {
        text-shadow: 1px 1px 3px rgb(0 121 254);
        font-size: 24px;
        letter-spacing: 4px;
      }
      &__bottom {
        display: flex;
        align-items: baseline;
      }

      .card-per {
        color: #F59972;
        display: flex;
        align-items: baseline;
        margin-left: 20px;

        &-txt {
          font-size: 14px;
          color: rgba(234, 254, 255, 0.7);
        }
        &-arrow {

        }
        &-num {
          font-size: 28px;
        }
        &-unit {

        }
      }
    }

    &-chart {
      position: relative;
      width: 130px;
      margin-left: 10px;
    }
  }
  .card-line2 {
    display: flex;
    margin-top: 10px;

    &-half {
      display: flex;
      flex: 1;
    }
    &-left {
      position: relative;
      width: 32px;
      height: 20px;
      background-image: url("~@/assets/screen/ico-light-mini.png");
      background-size: 100% 100%;
      margin-top: 15px;

      & > img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -14px;
      }
    }
    &-right {
      &__top {
        text-shadow: 1px 1px 3px rgb(0 121 254);
        font-size: 20px;
        letter-spacing: 4px;
      }
      &__bottom {
        display: flex;
        align-items: baseline;
      }
    }
  }
}

</style>
